

import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Login } from "actions/common";
import { pwdLogin } from "actions/login";
import { isOverflow } from "app/utils";
import AxHeader from "components/AxHeader";
import AxFooter from "components/Footer";
import s from "./index.scss";
import { Flex , Toast} from "antd-mobile";
import phonePng from "assets/images/phone.png";
import yzm2Png from "assets/images/yzm2.png";
import Icon from "antd/lib/Icon";
import md5 from "app/utils/md5"
import {callApi} from "app/utils";


@connect(
  state => ({
    common: state.common,
    login: state.login,
  }),
  {
    Login,
    pwdLogin
  }
)
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { 
      phone: "",
      code:"",
      codeIpt:""
   };
   this.handelPhone = this.handelPhone.bind(this)
   this.handelImgCode = this.handelImgCode.bind(this)
   this.submitLogin = this.submitLogin.bind(this)
   this.createCode = this.createCode.bind(this)
   
  }

 showCheck(a) {
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");
	var grd = ctx.createLinearGradient(50, 0, 250, 50);
	grd.addColorStop(0, "#FF0000");
	grd.addColorStop(1, "#00FF00");
	ctx.fillStyle = grd;
	ctx.clearRect(0, 0, 1000, 1000);
	ctx.font = "80px Arial";
	ctx.fillText(a, 50, 100);
	ctx.moveTo(50, 10);
	ctx.lineTo(250, 80);
	ctx.lineTo(10, 80);
	ctx.stroke()
}
 createCode() {
	this.state.code = "";
	var codeLength = 4;
	var selectChar = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
	for (var i = 0; i < codeLength; i++) {
		var charIndex = Math.floor(Math.random() * 60);
		this.state.code += selectChar[charIndex]
	}
	if (this.state.code.length != codeLength) {
		this.createCode()
	}
	this.showCheck(this.state.code)
}


handelPhone(event) {
    //console.log(event.target.value);
    this.setState({phone:event.target.value})
}
handelImgCode(event) {
 // console.log(event.target.value);
  this.setState({codeIpt:event.target.value})
}



submitLogin(){
    var { pwdLogin } = this.props;
    
    if(this.state.phone == ""){
        Toast.info('请填写手机号码', 1);
       // console.log("请填写手机号码");
        return false;
    }
    if(!(/^1\d{10}$/.test(this.state.phone))) {
        Toast.info('手机号格式不正确', 1);
        //console.log("手机号格式不正确");
        return false;
    }
    if(this.state.codeIpt=="") {
        Toast.info('请填写图片验证码', 1);
        //console.log("请填写图片验证码");
        return false;
    }
    if(this.state.codeIpt!=this.state.code) {
        Toast.info('图片验证码有误', 1);
        //console.log("图片验证码有误");
        return false;
    }
    this.props.router.push({pathname:"/login/forgetPwd2",query:{phone:this.state.phone}})
    
}

  componentDidMount() {
    let { Login } = this.props;
    this.createCode()
  }
  componentWillReceiveProps(nextProps) {
   
  }

  render() {
    let { isLogin } = this.props.common;
    let { phone , codeIpt } = this.state
    return (
      <div className={`${s.forgetPwdBox1}`}>
      <div>
        <AxHeader />
        <Flex direction="column" className={`${s.formBox}`}>
          <Flex.Item className={`${s.item}`} style={{display:'flex',height:'0.3rem',marginBottom:'0.2rem'}} >
            <div className={`flex1 ${s.stepBox} ${s.cur}`}><span>1</span>输入手机号</div>
            <div className={`flex1 ${s.stepBox}`}><span>2</span>重置密码</div>
            <div className={`flex1 ${s.stepBox}`}><span>3</span>修改成功</div>
          </Flex.Item>
          <Flex.Item className={`${s.item}`}>
            <img className={`${s.rightImg}`} src={phonePng} />
            <input
              placeholder="请输入您的手机号"
              type="number"
              className={`${s.phone}`}
              value={phone}
              onChange={this.handelPhone}
            />
          </Flex.Item>
          <Flex.Item className={`${s.item}`}>
            <Flex>
              <Flex.Item className={`${s.item} flex6`}>
            <input
              placeholder="请输入验证码"
              className={`${s.sms}`}
              value={codeIpt}
              onChange={this.handelImgCode}
            />
              </Flex.Item>
              <Flex.Item className={`${s.item} flex4`}>
                <canvas id="myCanvas" onClick={this.createCode}></canvas>
              </Flex.Item>
            </Flex>
            
          </Flex.Item>
         
          <Flex.Item className={`${s.item}`}>
            <div className={`${s.loginBtn}`} onClick={this.submitLogin}>登录</div>
          </Flex.Item>
          <Flex.Item className={`${s.item} ${s.row}`} style={{}}>
            <span className={`${s.redSpan}`} 
              style={{height:'0.3rem',lineHeight:'0.3rem',display:"inline-block"}}
            onClick={()=>{
              this.props.router.push('/login')
            }}>账号密码登录</span>
          </Flex.Item>
        </Flex>
        </div>
        <AxFooter base={true} />
      </div>
    );
  }
}
